/* 顶部样式区  */
/* 通过标签名来选择样式，我们称之为标签选择器 */
body {
	width: 100%;
	background: #F4F4F4;
	padding: 0px; /* padding：泡沫 ，内填充 */
	margin: 0px auto; /* 外边距  第一个参数表示上下，第二参数表示左右 */
	min-width: 1300px; /* 页面的最小宽度，当浏览器视图小于这个宽度，则会出现水平滚动条 */
	font-size: 14px; /* 设置页面的默认字体大小 */
}

/* 通配符，即所有标签消除默认的内填充和外填充 */
* {
	padding: 0px;
	margin: 0px auto;
}

a {
	text-decoration: none; /* 文本描述，去掉超链接默认的下划线 */
	color: #999999;
}

/* 鼠标移上去时的样式  */
a:hover {
	color: #FB654A !important;
}

/* 顶部样式区域  */
header {
	width: 100%;
	height: 180px;
}

.htitle {
	width: 100%;
	height: 40px;
	background-color: #E3E4E5;
	border-bottom: 1px solid #cccccc; /* 底部边框：1px 细线  颜色 */
}

.location {
	display: inline-block; /* 将标签设置为行内块级 */
	margin-left: 15%;
	height: 40px;
	line-height: 40px; /* 高度和行高一样，可以显示文本的垂直居中 */
	/* 设置背景图，不重复显示，距标签左边的中间显示 */
	background: url(../images/togo.png) no-repeat left center;
	padding-left: 32px;
}

.header_info {
	float: right;
	margin-right: 15%;
	height: 40px;
	line-height: 40px;
}

.header_info>div {
	float: left; /* 从左往右并排显示 */
}

span {
	color: #999999;
}

.header_info a {
	display: inline-block;
	line-height: 40px;
	padding: 0px 10px;
}

/* 搜索区样式 */
.search {
	width: 1200px;
	height: 120px;
	margin-top: 20px;
}

.search_left {
	width: 260px;
	height: 90px;
	float: left;
}

.search_right {
	width: 900px;
	height: 100%;
	float: left;
	margin-left: 40px;
}

.search_top {
	width: 800px;
	height: 50px;
	margin-top: 10px;
}

.search_div {
	width: 580px;
	background-color: red;
	float: left;
	padding: 2px;
	border-radius: 3px; /* radius：半径  弧度 */
}

.search_div > * {
	float: left;
}


.search_ipt {
	width:500px;
	height: 40px;
	padding-left: 2px;
	border: none;
}

.search_ipt:focus { /* 聚焦 */
	outline: none;
}

.search_btn {
	width: 80px;
	height: 40px;;
	border: none;
	background-color: red;
	color: #FFFFFF; /* 字体颜色 */
	font-size: 15px;
	font-weight: bold; /* 字体加粗 */
	font-family: "微软雅黑";
	letter-spacing: .1em; /* 字符之间隔0.1隔字符距离 */
}

.buycat {
	height: 40px;
	float: right;
	position: relative;
	padding: 5px 10px 0px 10px;
}

.buycat>a{
	color: red;
	height: 40px;
	line-height: 40px;
	display: inline-block;
	background: url(../images/cart1.png) no-repeat left center;
	padding-left: 40px;
}

.buycat>b {
	color: red;
	position: absolute; /* 绝对定位 */
	top: 0px;
	left: 30px;
}

.buycat:hover {
	outline: 2px solid red;
}

.search_bottom {
	width: 100%;
	height: 40px;
	margin-top: 20px;
}

.search_bottom>a {
	padding: 0px 15px;
	font-size: 15px;
	font-weight: bold;
	color: #333333;
	height: 30px;
	display: inline-block;
	line-height: 30px;
	border-radius: 2px;
}

.search_bottom .selected {
	background-color: #FE5B49;
	color: #FFFFFF;
}

.search_bottom .selected:hover {
	color: #FFFFFF !important;
}

/* .开头说明是类样式，即在页面里面通过class来引用 */
.slide {
	width: 1200px;
	height: 270px;
	position: relative; /* 位置，定位为相对布局 */
	overflow: hidden; /* 溢出，超出范围：隐藏 */
	margin-bottom: 10px;
}

.slide > img {
	width: 100%;
	height: 100%;
}

/* 中间商品信息内容区域样式 */
article {
	width: 1200px;
}

.view_title {
	width: 100%;
	height: 40px;
	line-height: 40px;
	border-top: 1px solid #BBBBBB;
	border-bottom: 1px solid #BBBBBB;
}

.view_title>a {
	display: inline-block;
	width: 80px;
	text-align: center; /* 文本对齐方式，指水平对齐 */
	background: url(../images/download.png) no-repeat 55px center;
	background-size: 20px 20px;
	border: 1px solid #BBBBBB;
	line-height: 28px;
	padding-right: 16px;
}

.view_title>a:hover {
	border-color: red;	
	background-image: url(../images/download1.png);
}

.view_title>* {
	margin-right: 10px;
}

.price_ipt {
	border: 1px solid #BBBBBB;
	height: 24px;
	color: #999999;
	padding: 2px;
}

.view_items {
	width: 100%;
	margin-top: 10px;
}

.view_items li {
	list-style-type: none; /* 无序列表风格 */
	width: 238px;
	overflow: hidden;
	float: left;
}

.view_items li>a {
	display: inline-block;
	width: 100%;
}

.view_items li>a>img {
	width: 80%;
	height: 240px;
	margin-left: 10%;
	margin-top: 20px;
}

.view_items li>a>span {
	width: 100%;
	display: inline-block;
	line-height: 24px;
	text-align: center;
	font-size: 16px;
}

.view_items li>div {
	width: 100%;
	height: 50px;
	margin-top: 10px;
}

.view_items li>div>span {
	display: inline-block;
	line-height: 30px;
}

.view_items li>div>span:first-child {
	color: red;
	font-size: 16px;
	font-weight: bold;
	padding-left: 10px;
	margin-left: 20px;
}

.view_items .buy {
	width: 20px;
	height: 20px;
	background: url(../images/shop_cart.png) no-repeat center center;
	background-size: 20px 20px;
	float: right;
	margin-right: 30px;
	margin-top: 8px;
}

.view_items li:hover {
	outline: 2px solid red;	
	box-shadow: 0px 0px 20px brown;
}

.view_items li:hover img {
	opacity: 0.8;
	transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transition: .6s;
	-moz-transition: .6s;
	-ms-transition: .6s;
	-webkit-transition: .6s;
}

/* 分页样式区 */
.page_info {
	width: 100%;
	text-align: center;
	float: left;
	margin-top: 20px;
	margin-bottom: 40px;
}


 .page_info>a {
 	display: inline-block;
 	width: 30px;
 	line-height: 30px;
 	margin-right: 10px;
 	border: 1px solid #DDDDDD;
 	background-color: #F7F7F7;
 }
 
 .page_info .active {
 	background-color: #CCCCCC;
 	border-color: red;
 }

/* 底部版权区域样式 */
footer {
	width: 100%;
	height: 120px;
	clear: both;
	border-top: 2px solid #DDDDDD;
	color: #999999;
	text-align: center;
}	

.foot_link {
	margin-top: 10px;
}

.foot_link>span {
	margin: 0px 10px;
}

footer>p {
	margin-top: 10px;
}

.copy {
	background: url(../images/yc.png) no-repeat left center;
	padding-left: 20px;
	background-size: 20px 20px;
}
